<template>
  <t-modal
    :title="title"
    width="900px"
    :visible="visible"
    @ok="okModal()"
    @cancel="closeModal()"
    wrapClassName="add-modal-container"
    forceRender
  >
    <div class="curve-modal-body">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="父节点" prop="zbunit">
          <a-input
            :value="
              operateType != 1 ? parameter.parentName : parameter.nodeName
            "
            disabled
          ></a-input>
        </a-form-model-item>
        <a-form-model-item label="名称" prop="nodeName">
          <a-input v-model="form.nodeName" placeholder="请输入"></a-input>
        </a-form-model-item>
        <a-form-model-item label="计划提交时间" prop="planDate">
          <a-date-picker
            style="width: 100%"
            v-model="form.planDate"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
          />
        </a-form-model-item>
      </a-form-model>
    </div>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
    operateType: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      form: {
        //名称
        nodeName: "",
        //计划提交时间
        planDate: undefined,
      },
      rules: {
        nodeName: [
          {
            required: true,
            message: "请输入名称",
          },
        ],
        planDate: [
          {
            required: true,
            message: "请选择计划提交时间",
          },
        ],
      },
    };
  },
  computed: {
    title() {
      let { operateType } = this;
      switch (Number(operateType)) {
        case 1:
          return "新增子节点";

        case 2:
          return "编辑";

        case 3:
          return "详情";

        default:
          return "新增子节点";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          console.log(this.parameter, "parameter");
          let { operateType } = this;
          if (operateType != 1) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    getDetail() {
      let { nodeName, planDate } = this.parameter;
      this.form = {
        //名称
        nodeName,
        //计划提交时间
        planDate,
      };
    },

    okModal() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { form, parameter, operateType } = this;
          let formJosn = {
            ...form,
            pid: parameter.uuid,
            directoryType: 4,
          };
          let url = "/probusiness/archiveDirectory/save";

          //编辑
          if (operateType != 1) {
            formJosn.uuid = parameter.uuid;
            formJosn.pid = parameter.pid;
            url = "/probusiness/archiveDirectory/update";
          }
          axios
            .post(url, formJosn, {
              headers: {
                "Content-Type": "application/json;charset=UTF-8",
              },
            })
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success("操作成功", 1.5);
                this.$parent.getTreeData();
                this.closeModal();
              } else {
                this.$message.error(res?.message ?? "操作失败");
              }
            })
            .catch((_) => {});
        }
      });
    },

    //关闭
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
    //重置表单
    resetForm() {
      this.form = {
        //名称
        nodeName: "",
        //计划提交时间
        planDate: undefined,
      };
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      padding: 14px 70px 14px 40px;
      max-height: 700px;
      overflow: auto;
      .ant-form-item {
        display: flex;
        .ant-form-item-label {
          flex-shrink: 0;
          width: 100px;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          overflow: hidden;
        }
      }
      .bj-upload-file {
        .choosed-file-warp {
          width: 100%;
        }
      }
    }
  }
}
</style>
